<!DOCTYPE HTML>
<html>
<head>
    <meta charset = "utf-8">
    <title>chili_UI_test</title>
    <script src = "lib/jquery.js"></script>
    <script src = "js/jquery.chili_UI.js"></script>
    <script>

    var zNodes =[
            {
                name: "父节点11 - 折叠",
                children: [
                    {name: "弹出对话框", click: "alert('ok');"},
                    {name: "打开链接", url:"http://www.baidu.com", newWin:false},
                    {name: "在新窗口打开链接", url:"http://www.baidu.com", newWin:true},
                    {name: "叶子节点114"}
                ]
            },
            {
                name: "父节点11 - 折叠",
                children: [
                    {name: "叶子节点111"},
                    {name: "叶子节点112"},
                    {name: "叶子节点113"},
                    {name: "叶子节点114"}
                ]
            },
            {
                name: "父节点11 - 折叠"
            },
            {
                name: "父节点11 - 折叠",
                children: [
                    {name: "叶子节点111"},
                    {name: "叶子节点112"},
                    {name: "叶子节点113"},
                    {name: "叶子节点114"}
                ]
            }
        ];

        var zBar = [
            {caption : "主页", click : "chiliShowMessageBox()", activate : true},
            {caption : "微博", click : ""},
            {caption : "邮箱", click : ""},
            {caption : "联系我们", click : ""},
        ];

        window.onload = function () {
            
            var button1 = new chili.UI.button($("#div1"));
            var button2 = new chili.UI.button($("#div2"));
            var button3 = new chili.UI.button($("#div3"));
            var button4 = new chili.UI.button($("#div4"));
            var msgBox = new chili.UI.msgBox($('#div5'));
            var tree = new chili.UI.tree($('#div6'));
            var tree1 = new chili.UI.tree($('#div7'));
            var bar1 = new chili.UI.bar($('#bar1'));
            var msgbox = new chili.UI.msgBox($("#msgbox"));
            var form1 = new chili.UI.form($("#form1"));
            var tip1 = new chili.UI.tip($("#tip1"));

            chiliShowMessageBox = function () {
                msgbox.show("主页", "RedBirds");
            };
        

            button1.init();
            button2.init({bgColor : '#C0C0C0', fgColor : '#0C0C0C', shadow : 0, width : 80});
            button3.init({bgColor : '#F0F0F0', fgColor : '#0F0F0F', fontColor : '#0C0C0C', fontColor1 : '#F0F0F0'});
            button4.init({width : 20, height : 20, radius : 20, caption : '×'});

            form1.init({width : 500, height: 250});

            tree.init();

            var setting = {
                global:{
                    width: 200,
                    unitHeight: 30,
                    speed:100
                },
                superior:{
                    fontSize: 11,
                    lightColor:'#abcdef'
                },
                children:{
                    fontSize: 9
                }
            };

            tree1.parsedJson(zNodes);
            tree1.init(setting);


            bar1.init(zBar, {unit_width : 120, width : "70.55%"});

            
            button1.element.click(function(){
                msgbox.show("Hello World!", function(){
                    msgbox.show("你又点击了我一次", "RedBirds");
                });
            });

            button2.element.click(function(){
                form1.show();
            });

            button3.element.click(function () {
                tip1.show();
            });

            // button3.element.chili(function(){
            //     tip1.show();
            // });

            
        };
    </script>
</head>
<body>
    <div id="bar1"></div>
    <br>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <br>
    <div id="div6">
        <ul>
            <li><span>文件 File</span></li>
            <ul>
                <li onclick=""><span>新建 new</span></li>
                <li onclick=""><span>打开 open</span></li>
                <li onclick=""><span>保存 save</span></li>
                <li onclick=""><span>关闭 close</span></li>
            </ul>
            <li><span>编辑 Edit</span></li>
            <ul>
                <li onclick=""><span>撤销 undo</span></li>
                <li onclick=""><span>剪切 cut</span></li>
                <li onclick=""><span>复制 copy</span></li>
                <li onclick=""><span>粘帖 paste</span></li>
            </ul>
            <li><span>工具 Tools</span></li>
            <li><span>帮助 Help</span></li>
            <ul>
                <li onclick=""><span>帮助 F1</span></li>
                <li onclick=""><span>注册 register</span></li>
                <li onclick=""><span>关于 about</span></li>
            </ul>
        </ul>
    </div>
    <br>
    <div id="div7"></div>
    <br>
    <div id="msgbox"></div>
    <div id="form1"></div>
    <div id="tip1"></div>

</body>
</html>
